<template>
  <div>
   <div class="top"> <span class="s1">TODOLIST</span> <input class="input" type="text" placeholder="请输入代办事件" v-model="title" @keydown.enter="add" /></div>
  
      <!-- 正在进行 -->
<div class="center">
      <h2>进行中</h2><h3>{{undone}}</h3>
</div>
        <div class="box1">
        
          <li v-for="(item,index) in $store.state.todo"
        :key="'a'+index"
        v-show="item.status == 0">
        <input class="aa" type="checkbox" @click="change(index)" :checked="item.status" />
        {{ item.title }}
        <span @click="remove(index)" class="bb">-</span>
      </li>
        </div>
      

      <!-- 已完成 -->
      <div class="center">
      <h2>已完成</h2> <h3>{{ok}}</h3>
        </div>
      <div class="bottom">
        
      <li v-for="(item,index) in $store.state.todo"
        :key="'b'+index"
        v-show="item.status == 1">
         <input class="aa" type="checkbox" @click="change(index)" :checked="item.status"/>
 {{ item.title }}<span class="bb"  @click="remove(index)">-</span>

      </li>

        </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "",
    };
  },
  mounted() {},
  computed:{
    
      undone() {
      let res = this.$store.state.todo.filter((item) => {
        return item.status == 0;
      });
      return res.length;
    },
     //计算未完成的数据的长度 过滤出 状态为0的数据 返回长度
    ok() {
      let res = this.$store.state.todo.filter((item) => {
        return item.status == 1;
      });
      return res.length;
    
    }
     //计算完成的数据的长度 过滤出 状态为1的数据 返回长度
  },
  methods: {
    add() {
      this.$store.commit("add", this.title);
    },
    change(index) {
      this.$store.commit("change",index);
    },
    remove(index){
      this.$store.commit("remove",index)
    }
  
  },
};
</script>

<style lang="scss">
body{
  margin: 0;
  padding: 0;
 
  background-color: rgb(117, 113, 112);
}
.top{
  width: 100%;
  height: 40px;
  background-color: rgb(49, 41, 41);
  line-height: 40px;
  text-align: center;
  .s1{
    font-size: 20px;
    color: white;
    margin-right:30px ;
    font-weight: 600;

  }
  .input{
    border: none;
    border-radius: 10px;
    line-height: 30px;
    width: 400px;
  }
}
.center{
    width: 100%;
    height: 40px;
    h2{
      float: left;
      margin-left: 300px;
    }
    h3{
      float: left;
    line-height: 40px;

      margin-left: 30px;

    }
}
.box1{
  margin-top: 30px;
  
  li{
    list-style: none;
    margin-left: 300px;
    width: 800px;
    background-color: rgb(8, 227, 243);
    line-height: 40px;
    margin-top:10px;
    .aa{
    line-height: 40px;
  float: left;
   margin-left: 20px;
}
  .bb{
    float: right;
    margin-right: 20px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;

  }
  }
}
.bottom{
   margin-top: 30px;
  
  li{
 list-style: none;
margin-left: 300px;
    width: 800px;
       background-color: rgb(134, 152, 153);
    line-height: 40px;
    margin-top:10px;
    .aa{
      float: left;
   margin-left: 20px;
    line-height: 40px;

}
 .bb{
    float: right;
    margin-right: 20px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;

  }
  }

}

</style>
